import * as React from 'react';
import * as ReactDOM from 'react-dom';
const $ = require("jquery");
var $subShow = require("./sub-show.js");

var SubLog = $subShow.Log;

var LOG = React.createClass({
    getDefaultProps: function() {
        return {
            data: false,
            timeName: "",
            contentName: ""
        };
    },
    componentWillMount: function() {},
    render: function() {
        var i = 0,
            $sub = [],
            item = {},
            data = this.props.data ? this.props.data : "";
        var content = '';

        for (var i = 0; i < data.length; i++) {
            item = data[i];

            if (this.props.contentName instanceof Array) {

                for (var j = 0; j < this.props.contentName.length; j++) {
                    content += item[this.props.contentName[j]] + ',';
                }
                content = content.substr(0, content.length - 1)
            } else {
                content = item[this.props.contentName];
            }
            $sub.push(<SubLog  key={i} time={item[this.props.timeName]} content={content}/>)
        }
        return (
            <div className="container-log">
                    {$sub}
                </div>
        )
    }

})


var SubQuan = $subShow.AreaQuanhow;

var QUAN = React.createClass({
    getDefaultProps: function() {
        return {
            data: false,
            upName: "",
            downName: "",
            grayName: ""
        };
    },
    componentWillMount: function() {},
    render: function() {
        var i = 0,
            $sub = [],
            item = {},
            data = this.props.data ? this.props.data : "";
        for (var i = 0; i < data.length; i++) {
            item = data[i]
            $sub.push(<SubQuan key={i} upStep={i+1} isDone={Boolean(Number(item[this.props.grayName])) ? true : false}  upText={item[this.props.upName]} downText={item[this.props.downName]}/>)
        }

        return (
            <div className="container-quan">
                    {$sub}
                </div>
        )
    }

})



var SubImage = $subShow.AreaImageshow;

var IMAGES = React.createClass({
    getDefaultProps: function() {
        return {
            data: false,
            srcName: "",
        };
    },
    getInitialState: function() {
        return {
            isShow: false
        }
    },
    componentWillMount: function() {},
    handClick: function($sub) {
        var $parent = $(ReactDOM.findDOMNode(this));
        var $ShowTarget = $(".tempShowBigImage", $parent);
        var $target = $("img", $ShowTarget);

        var width = $sub[0].naturalWidth;
        var wwindth = $(window).width();
        var wheigth = $(window).height();
        var height = $sub[0].naturalHeight;
        var left = (wwindth - 180 - width) / 2 + 180;
        var top = (wheigth - 49 - height) / 2 + 49;


        $ShowTarget.css({
            "left": left < 0 ? 0 : left,
            "top": top < 0 ? 0 : top,
            "width": width > wwindth ? wwindth : width,
            "height": height > wheigth ? wheigth : height,
            "overflow": "auto",
            "position": "fixed",
            "z-index": 23
        });
        $target.css({
            "width": width,
            "height": height,
            "z-index": 50
        }).prop("src", $sub.prop("src"));
    },
    subHandClick: function($sub) {
        this.setState({
            isShow: !this.state.isShow
        })
        this.handClick($sub)
    },
    handHide: function() {
        this.setState({
            isShow: !this.state.isShow
        })
    },
    render: function() {
        var i = 0,
            j = this.props.data.length,
            $sub = [],
            item = "",
            data = this.props.data ? this.props.data : "";
        var css = this.state.isShow ? " " : "hide";
        for (var i = 0; i < data.length; i++) {
            item = data[i]
            if (item != "") {
                $sub.push(<div className="info-area" key={i}><SubImage handClick={this.subHandClick}  src={item} /></div>)
            }

        }

        return (
            <div className="container-info-info">
                    <div className="info-row">
                        {$sub}
                    </div>
                    <div onClick={this.handHide} className={"winmark " + css}>
                    </div>
                    <div onClick={this.handHide} className={"tempShowBigImage " + css}>
                        <img/>
                    </div>
                </div>
        )
    }
})

var SubTableHead = $subShow.TableHead;
var TableHead = React.createClass({
    getDefaultProps: function() {
        return {
            data: false
        }

    },
    render: function() {
        var $sub = [],
            item = {},
            data = this.props.data ? this.props.data : "";
        for (var i = 0; i < data.length; i++) {
            item = data[i]
            if (item != "") {
                $sub.push(<SubTableHead key={i} title={data[i]}/>)
            }
        };
        return (<tr>{$sub}</tr>)
    }
})


var TR = React.createClass({
    getDefaultProps: function() {
        return {
            data: false
        }

    },
    render: function() {
        var $sub = [],
            item = [],
            data = this.props.data ? this.props.data : "";
        if (data.length <= 0) {
            $sub.push(<div>无产品信息</div>);
        }
        for (var i = 0; i < data.length; i++) {
            item = data[i];
            $sub.push(<TD key={i} data={item}/>);
        };
        return (
            <tbody>{$sub}</tbody>
        )
    }
});

var TD = React.createClass({
    getDefaultProps: function() {
        return {
            data: false
        }

    },
    render: function() {
        var $sub = [],
            item = [],
            data = this.props.data ? this.props.data : "";
        for (var i = 0; i < data.length; i++) {
            item = data[i];
            if (i == data.length - 1) {
                $sub.push(<td key={i}>
                        <div className="table-info-area">
                            <span className="label-remark" title={item}>
                            {item}
                            </span>
                        </div>
                    </td>);
            } else {
                $sub.push(<td key={i}>
                        <div className="table-info-area">
                            <span>
                            {item}
                            </span>
                        </div>
                    </td>);
            }
        };
        return (
            <tr>{$sub}</tr>
        );
    }
});

var TemplateTr = React.createClass({
    getDefaultProps: function() {
        return {
            data: false
        }
    },
    render: function() {
        var $sub = [],
            item = [],
            data = this.props.data ? this.props.data : "",
            text = {};
        for (var i = 0; i < data.length; i++) {
            item = data[i];
            if (item != null) {
                text = [item.catName, item.prodName, item.brandName, item.model,
                    item.color, item.special, item.unit,
                    item.supplierInfo
                ];
                $sub.push(<TemplateTd key={i} data={text}/>);
            }
        };
        return (
            <tbody>{$sub}</tbody>
        )
    }
})

var TemplateTd = React.createClass({
    getDefaultProps: function() {
        return {
            data: false,
        }
    },
    render: function() {
        var $sub = [],
            item = [],
            data = this.props.data ? this.props.data : "";
        for (var i = 0; i < data.length; i++) {
            item = data[i];
            $sub.push(<td key={i}>{item}</td>);
        }
        return (
            <tr>{$sub}</tr>
        )
    }
})

/*
        var data = [
            [
                {"title":"申请人","showContent":"测试","type":"1","csslength":"1"},
                {"title":"申请人","showContent":"测试","type":"1","csslength":"1"},
                {"title":"申请人","showContent":"测试","type":"1","csslength":"1"},
                {"title":"申请人","showContent":"测试","type":"1","csslength":"1"}
            ],
            [
                {"title":"申请人","showContent":"测试","type":"1","csslength":"1"},
                {"title":"申请人","showContent":"测试","type":"1","csslength":"1"},
                {"title":"申请人","showContent":"测试","type":"1","csslength":"1"},
                {"title":"申请人","showContent":"测试","type":"1","csslength":"1"}
            ],
            [

                {"title":"申请人","showContent":"测试","type":"1","csslength":"1"},
                {"title":"申请人","showContent":"测试","type":"1","csslength":"1"},
                {"title":"申请人","showContent":"测试","type":"1","csslength":"1"},
                {"title":"申请人","showContent":"测试","type":"1","csslength":"1"}
            ],
            [

                {"title":"申请人","showContent":"测试","type":"1","csslength":"1"},
                {"title":"申请人","showContent":"测试","type":"1","csslength":"1"},
                {"title":"申请人","showContent":"测试","type":"1","csslength":"1"},
                {"title":"申请人","showContent":"测试","type":"1","csslength":"1"}
            ],
            [
                {"title":"申请人","showContent":"测试","type":"1","csslength":"1"},
                {"title":"申请人","showContent":"测试","type":"1","csslength":"1"},
                {"title":"申请人","showContent":"测试","type":"1","csslength":"1"},
                {"title":"申请人","showContent":"测试","type":"1","csslength":"1"}
            ]
        ]*/

var Areashow = $subShow.Areashow;

/*    var AREASHOW = React.createClass({
            getDefaultProps: function () {
                return {
                    data:false,
                    srcName:"",
                };
            },
            componentWillMount: function () {
            }
            render: function () {
                var i=0,j=0,$rows,tempRow,$row,tempArea;
                for(;i<data.length;i++){

                    tempRow = data[i];
                    j = 0,$row=[];
                    for(;j<tempRow.length;j++){

                        tempArea = tempRow[i];
                        $row.push(<Areashow title={tempArea.}/>)

                    }

                }*/
var HEAD = $subShow.Head;



module.exports = {
    LOG: LOG,
    IMAGES: IMAGES,
    QUAN: QUAN,
    Areashow: Areashow,
    HEAD: HEAD,
    TableHead: TableHead,
    TR: TR,
    TemplateTr: TemplateTr,
}



/*
 <div className={isShow}>
                    <label className="form-label">
                        {this.props.param.title}
                        {(() => {
                            if (this.props.param.isStar == true) {
                                return (
                                    <i className="i-red">*</i>
                                )
                            }
                        })()}
                        ：
                    </label>
                    <div className={cssLength}>
                        {(() => {
                            switch (this.props.param.type.toLocaleUpperCase()) {
                                case "INPUT":
                                    return (
                                        <INPUT placeholder={this.props.param.placeholder} name={this.props.param.name}
                                               setFormValue={this.setFormValue} handleBlur={this.handleBlur}
                                               defaultValue={defaultValue}/>
                                    )
                                case "INPUT_LABEL":
                                    return (
                                        <INPUT_LABEL placeholder={this.props.param.placeholder} name={this.props.param.name}
                                                     setFormValue={this.setFormValue} handleBlur={this.handleBlur}
                                                     subTitle={this.props.param.subTitle} defaultValue={defaultValue}/>
                                    )
                                case "TEXTAREA":
                                    return (
                                        <TEXTAREA placeholder={this.props.param.placeholder} name={this.props.param.name}
                                                  setFormValue={this.setFormValue} handleBlur={this.handleBlur}
                                                  defaultValue={defaultValue}/>
                                    )
                                case "SELECT":
                                    return (
                                        <SELECT placeholder={this.props.param.placeholder} name={this.props.param.name}
                                                setFormValue={this.setFormValue} handleBlur={this.handleBlur} keyName={ this.props.param.keyName}
                                                defaultValue={defaultValue} valuekey={this.props.param.valuekey}/>
                                    )
                                case "UPIMAGE":
                                    return (
                                        <UPIMGAE name={this.props.param.name} setFormValue={this.setFormValue} handleBlur={this.handleBlur}
                                                 defaultValue={defaultValue}/>
                                    )
                                default:
                                    return (
                                        <INPUT placeholder={this.props.param.placeholder} name={this.props.param.name}
                                               setFormValue={this.setFormValue} handleBlur={this.handleBlur}
                                               defaultValue={defaultValue}/>
                                    )
                            }
                        })()}
                        <VALIDE errorMessage={this.props.param.errorMessage} name={this.props.name}/>
                    </div>
                </div>



 */